<template>
  <el-card>
    <PageTools :text="`共${count}条数据`"></PageTools>
    <!-- 表格 -->
    <el-table :data="list" border>
      <el-table-column
        width="80"
        prop="type"
        label="操作类型"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="user"
        label="操作人"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="results"
        label="执行结果"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="dateTime"
        label="操作时间"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="description"
        label="描述"
      ></el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-row type="flex" justify="center" align="middle" style="height: 60px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryData.page"
        :page-sizes="[10, 5, 3]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
      >
      </el-pagination>
    </el-row>
  </el-card>
</template>

<script>
import axios from "axios";
export default {
  name: "User",
  data() {
    return {
      queryData: {
        page: 1,
        pagesize: 10,
        username: "",
      },
      list: [],
      count: 0,
    };
  },
  created() {
    this.initData();
  },
  methods: {
    // 分页组件事件
    handleSizeChange(val) {
      this.queryData.pagesize = val;
      this.initData();
    },
    // 分页组件事件
    handleCurrentChange(val) {
      this.queryData.page = val;
      this.initData();
    },

    initData() {
      axios
        .post("http://localhost:9528/backLog", this.queryData)
        .then((res) => {
          console.log(res);
          this.list = res.data.data;
          this.count = res.data.total;
        });
    },
  },
};
</script>


<style lang="scss" scoped>
</style>
